<style>
	.searchpanel{
		width:99%;
		margin:10px auto;
		border:solid 0px red;
	}
	.resultpanel{
		width:99%;
		margin:10px auto;
		border:solid 0px black;	
	}
	.flexSelect{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.labelSelect{
		border:solid 1px lightgreen;
		text-align: center;
		width:120px;
		font-size:20pt;
		margin-left:6px;
		margin-right: 6px;
	}
	.btnListPanel{
		width: 95%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.btnListItem{
		margin-left:6px;
		margin-right: 6px;
	}
	.btnListItem:last-child{
		margin-left:6px;
		margin-right: 0px;
	}
	.resultpaginate{
		margin:10px auto;
		text-align: center;
	}
</style>
<template>
	<div id="mainpanel">
		<div id="searchpanel" class="searchpanel">
			<el-form ref="searchForm" :model="searchForm" :rules="searchFormRules" 
				class="search-form" auto-complete="on" label-position="left" >
      <el-form-item>
      	<div class="flexSelect">
         <span class="labelSelect">编码</span>
      	 <el-input v-model="searchForm.code" style="width:360px;"></el-input>
      	</div>
      </el-form-item>
      <el-form-item>
      	<div class="flexSelect">
         <span class="labelSelect">标题</span>
      	 <el-input v-model="searchForm.title" style="width:360px;"></el-input>
      	</div>
      </el-form-item>
      <el-form-item>
      	<div class="btnListPanel">
      		<div class="btnListItem"><el-button  size="small" :loading="loading" type="primary"  @click.native.prevent="submitSearch">查询</el-button></div>
      		<div class="btnListItem"><el-button  size="small" @click="inserNew">新增</el-button></div>
      	</div>
      </el-form-item>
			</el-form>
		</div>
		<div id="resultpanel" class="resultpanel">
    <el-table
      :data="tableData" 
      border 
      style="width: 100%" max-height="360">
      <el-table-column
        prop="litno"
        label="序号"
        width="66" align="center">
      <template slot-scope="scope">
        <i class="el-icon-list"></i>
        <span style="margin-left: 10px">{{ scope.row.lstno }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="编码"
        width="130" align="center">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题" align="center">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建日期" 
        width="130" align="center">
      </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100" align="center">
      <template slot-scope="scope">
        <el-button @click="handlePreviewClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button  @click="handleUpdateClick(scope.row)" type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="resultpaginate">
    <el-pagination
      @size-change="handlePageSizeChange"
      @current-change="handleCurrentPageChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400" :background="true">
      <template scope-slot="total">
      	总数:
      </template>
    </el-pagination>
    </div>
		</div>

		<div id="managepanel">
		</div>
<el-dialog
  title="编辑管理"
  :visible.sync="dialogManageVisible"
  :before-close="handleDialogManageClose" top="5vh">

			<el-form ref="manageForm" :model="manageForm" :rules="manageFormRules" 
				class="manage-form" auto-complete="on"  label-position="left" label-width="166px">
      <el-form-item label="编码">
      	        <el-input v-model="manageForm.code"></el-input>
      </el-form-item>
      <el-form-item label="标题">
      	        <el-input v-model="manageForm.title"></el-input>
      </el-form-item>
      <el-form-item style="display:block;text-align: center;">
      	<div style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
      		<div style="margin-right:10px;">
      			<el-button :loading="loading" type="primary" @click.native.prevent="onSubmit">提交</el-button>
      		</div>
      		<div>
      			<el-button @click="onRefresh">刷新</el-button></div>
      	</div>
      </el-form-item>
			</el-form>
 </el-dialog>
	</div>
</template>

<script>
  export default {
		name:"FileTypeManage",
		props:{
			id:{
				type:Number,
				default:()=>{
					return 0
				}
			}
		},
    data() {
      return {
      	loading:false,
      	currentPage:3,
      	dialogManageVisible:false,
      	tableData:[
      	{lstno:1,code:"word",title:"Word文件",role:"湖南省/湘西州/吉首市",jobname:"校长",created_at:"2024-08-01"},
      	{lstno:2,code:"xls",title:"Excel文件",role:"湖南省/湘西州/花垣县",jobname:"数学老师",created_at:"2020-12-11"},
      	{lstno:3,code:"xlsx",title:"Excel文件",role:"湖南省/湘西州/古丈县",jobname:"班主任",created_at:"2023-09-23"},
      	{lstno:4,code:"mp4",title:"MP4文件",role:"湖南省/湘西州/永顺县",jobname:"副科长",created_at:"2021-03-17"},
      	{lstno:5,code:"ppt",title:"PPT文件",role:"湖南省/湘西州/龙山县",jobname:"教导主任",created_at:"2023-12-12"},
      	{lstno:6,code:"pptx",title:"PPT文件",role:"湖南省/湘西州/高新区",jobname:"局长",created_at:"2020-09-12"},
      	],
      	manageForm:{
      		
      	},
      	searchForm:{
      		
      	},
        fileList: []
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      handleSuccess(res,file,fileList){
      	
      },
      handleSuccess(res,file,FileList){
      	
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      onSubmit(){
      	console.log("platform_id=",this.platform_id)
      	console.log("account_id=",this.account_id)
      },
      onRefresh(){
      	
      },
      submitSearch(){
      	
      },
      resetSearch(){
      	
      },
      inserNew(){
      	this.dialogManageVisible=true;
      	this.$emit("accountManagePanelHide")
      },
      handleDialogManageClose(done){
      	done(true);
      	this.$emit("accountManagePanelShow")
      },
      handleCurrentPageChange(page){
      	//done(true);
      },
      handlePageSizeChange(pagesize){
      	//done(true);
      },
      handlePreviewClick(row){
      	console.log(row);
      },
      handleUpdateClick(row){
      	console.log(row);
      	this.inserNew();
      }
    }
  }
</script>